<template>
	<div class="b-logistics-list table-theme">
		<head-title title="商家--物流点"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view 
						:option-list="onlieList" 
						:value="is_onlie" 
						placeholder="上下架"
						type="is_onlie"
						@value="setSelectValue">
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add">
						<el-button type="primary" @click="add">添加物流</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总物流点数：{{ total }}</p>
			<el-table :data="logisticsList" stripe>
				<el-table-column label="物流序号" align="center" prop="address_id"></el-table-column>
				<el-table-column label="物流名称" align="center" prop="company_name"></el-table-column>
				<el-table-column label="始发站物流点联系人" align="center" prop="start_consignee"></el-table-column>
				<el-table-column label="始发站物流点手机号码" align="center" prop="start_mobile"></el-table-column>
				<el-table-column label="始发站物流点座机号" align="center" prop="start_landline"></el-table-column>
				<el-table-column label="始发站物流点详细地址" align="center" prop="">
					<template slot-scope="scope">
						{{ scope.row.start_province }}{{ scope.row.start_city }}{{ scope.row.start_district }}{{ scope.row.start_address }}
					</template>
				</el-table-column>
				<el-table-column label="终点站物流点联系人" align="center" prop="end_consignee"></el-table-column>
				<el-table-column label="终点站物流点手机号码" align="center" prop="end_mobile"></el-table-column>
				<el-table-column label="终点站物流点座机号" align="center" prop="end_landline"></el-table-column>
				<el-table-column label="终点站物流点详细地址" align="center" prop="">
					<template slot-scope="scope">
						{{ scope.row.end_province }}{{ scope.row.end_city }}{{ scope.row.end_district }}{{ scope.row.end_address }}
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch disabled v-model="scope.row.is_onlie" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.address_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="120">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row.address_id)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				logisticsList: [],
				total: 0,totalData: 0, 
				page: 0,
				is_onlie: '1', // 1上架 2下架
				onlieList:[
					{
						label:'上架',
						value:1
					},
					{
						label:'下架',
						value:2
					}
				]
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					is_onlie: this.is_onlie,
					user_id: this.$route.query.user_id
				};
				this.$http(this.$ApiList.seeLogisticsList, data).then(res => {
					this.logisticsList = [];
					this.logisticsList = res.datas.data;
					this.total = res.datas.count;
				});
			},
			edit(id) {
				this.$router.push({
					path: '/add_logistics',
					query: {
						type: 1,
						id: id
					}
				});
			},
			add() {
				this.$router.push({
					path: '/add_logistics',
					query: {
						type: 1,
						store_id:this.$route.query.store_id,
						user_id:this.$route.query.user_id
					}
				});
			},
			refreshPage() {
				this.page = 1;
				this.init()
			},
			setSelectValue(obj){
				const { type,value } = obj
				switch (type) {
					case 'is_onlie':
						this.is_onlie = value
						break;
				
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
</style>
